import React, {Component} from 'react';
import {Menu} from "antd";
import { withRouter } from 'react-router';
import { menuItems } from 'menus/main';
import {setOpenKeys} from "redux/action/app";
import {connect} from "react-redux";


class Menus extends Component<any,any> {

    getSelectedKeys:any=()=>{
      return  [this.props.location.pathname]
    }
    render() {
        return (
            <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={['1']}
                items={menuItems}
                className={"flex-grow-1"}
                style={{overflow:'auto'}}
                defaultOpenKeys={this.props.menuCollapsed?[]:this.props.openKeys}
                openKeys={this.props.menuCollapsed?[]:this.props.openKeys}
                onSelect={(param:any)=>{this.props.history.push({pathname:param.key})}}
                selectedKeys={this.getSelectedKeys()}
                onOpenChange={(openKeys:string[])=>{if(!openKeys||openKeys.length<=0)return;this.props.setOpenKeys(openKeys)}}
            />
        );
    }
}

const mapStateToProps=(state:any)=>{
    return state.app
}

const mapDispatchToProps={setOpenKeys}

const WithConnect=connect(mapStateToProps,mapDispatchToProps)(Menus)

export default withRouter(WithConnect);


